<template>
  <div class="login_wrap">
    <div class="login">
      <div class="title">
        <div
          class="list_title"
          :class="loginType === 'login' ? 'loginType' : ''"
          @click="loginType = 'login'"
        >登录</div>
        <div
          class="list_title"
          :class="loginType === 'register' ? 'loginType' : ''"
          @click="loginType = 'register'"
        >注册</div>
      </div>
      <div class="form">
        <el-form ref="ruleForm" :model="userInfo" :rules="ruleForm" label-width="80px">
          <el-form-item label="用户名" prop="email">
            <el-input v-model="userInfo.email" prop="loginFormRules.email"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="userInfo.password" type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword" v-if="loginType === 'register'">
            <el-input v-model="userInfo.confirmPassword" type="password"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <div style="display: flex">
              <el-input v-model="userInfo.code"></el-input>
              <el-button
                style="margin-left: 10px"
                type="success"
                :disabled="disabledBtn"
                @click="getCodeClick"
              >{{ btnTitle }}</el-button>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              style="width: 100%; margin-top: 20px"
              @click="submitClick('ruleForm')"
            >登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getCode, login, register } from "@/request/login";
import { messageFun } from "@/utils/element";
import { regularEmail } from "@/utils/regular";
export default {
  data() {
    const validateEmail = (rule, value, callback) => {
      if (!regularEmail(value)) {
        callback(messageFun("请输入正确邮箱地址"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (value === "") {
        callback(messageFun("请输入密码"));
      } else {
        callback();
      }
    };
    const validateConfirmPassword = (rule, value, callback) => {
      let password = this.userInfo.password;
      if (value === "") {
        callback(messageFun("请输入密码"));
      } else if (password !== value) {
        callback(messageFun("输入的密码不一致 "));
      } else {
        callback();
      }
    };
    return {
      userInfo: {
        email: "1572283733@qq.com",
        password: "kxg123456",
        confirmPassword: "",
        code: ""
      },
      ruleForm: {
        email: [{ required: true, validator: validateEmail, trigger: "blur" }],
        password: [
          { required: true, validator: validatePassword, trigger: "blur" },
          {
            min: 6,
            max: 18,
            message: "长度在 8 到 20 个字符",
            trigger: "blur"
          }
        ],
        confirmPassword: [
          {
            required: true,
            validator: validateConfirmPassword,
            trigger: "blur"
          },
          {
            min: 6,
            max: 18,
            message: "长度在 8 到 20 个字符",
            trigger: "blur"
          }
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
      },
      reqData: {
        username: "",
        password: "",
        code: ""
      },
      loginType: "login",
      btnTitle: "获取验证码",
      disabledBtn: false
    };
  },
  methods: {
    // 登录
    async submitClick(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid && this.loginType === "login") {
          this.reqData = {
            username: this.userInfo.email,
            password: this.userInfo.password,
            code: this.userInfo.code
          };
          const { data } = await login(this.reqData);
          if (data && data.resCode === 0) {
            messageFun(data.message, "success");
            this.$router.push("/user");
          } else {
            messageFun(data.message);
          }
        } else if (valid && this.loginType === "register") {
          if (this.userInfo.password != this.userInfo.confirmPassword)
            return messageFun("输入的密码不一致");
          this.reqData = {
            username: this.userInfo.email,
            password: this.userInfo.password,
            code: this.userInfo.code
          };
          const { data } = await register(this.reqData);
          if (data && data.resCode === 0) {
            messageFun(data.message);
          } else {
            messageFun(data.message);
          }
        }
      });
    },
    // 获取验证码
    async getCodeClick() {
      if (!regularEmail(this.userInfo.email))
        return messageFun("请输入正确的邮箱地址");
      this.reqData = {
        username: this.userInfo.email,
        module: this.loginType
      };
      const { data } = await getCode(this.reqData);
      if (data && data.resCode === 0) {
        this.countdown(60);
        messageFun(data.message, "success");
      } else {
        messageFun("获取验证码失败");
      }
    },
    // 倒计时
    countdown(number = 59) {
      let second = number;
      this.btnTitle = `倒计时${second}秒`;
      let time = setInterval(() => {
        second--;
        this.disabledBtn = true;
        this.btnTitle = `倒计时${second}秒`;
        if (second < 0) {
          this.btnTitle = `重新获取`;
          this.disabledBtn = false;
          clearInterval(time);
        }
      }, 1000);
    }
  }
};
</script>

<style lang="scss" scoped>
.login_wrap {
  height: 100vh;
  background-size: 100%;
  background-image: url("~@/assets/login/back.jpg");
  .login {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 400px;
    height: 450px;
    border-radius: 10px;
    margin-top: -250px;
    margin-left: -200px;
    background-color: #fff;
    .title {
      display: flex;
      justify-content: space-evenly;
      text-align: center;
      height: 50px;
      line-height: 50px;
      .list_title {
        width: 60px;
        cursor: pointer;
      }
      .loginType {
        border-bottom: 3px solid red;
      }
    }
    .form {
      margin-top: 50px;
      margin-right: 20px;
    }
  }
}
</style>